<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">隐患排查台账,风险巡查</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="巡检人员">
                            <el-input placeholder="请输入" class="inputW" v-model="userName"></el-input>
                        </el-form-item>
                        <el-form-item label="风险点">
                            <el-input placeholder="请输入" class="inputW" v-model="patrolName"></el-input>
                        </el-form-item>

                        <el-form-item label="风险类型">
                            <el-select class="inputW" v-model="pointType">
                                <el-option
                                        v-for="item in pointData"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!--                        <el-form-item label="任务状态">-->
                        <!--                            <el-select class="inputW" v-model="processflag">-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in flagData"-->
                        <!--                                        :key="item.Id"-->
                        <!--                                        :label="item.Name"-->
                        <!--                                        :value="item.Id">-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="开始时间">
                            <el-date-picker
                                    v-model="date"
                                    type="month"
                                    format="yyyy-MM"
                                    value-format="yyyy-MM"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="exportData">导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <template v-if="tableData">
                    <el-table :data="tableData" style="margin-bottom: 40px" :stripe="true" :border="true" size="mini"
                              style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                        <el-table-column prop="patrolName" label="风险点名称"></el-table-column>
                        <el-table-column prop="name" label="巡检人员"></el-table-column>
                        <el-table-column prop="cycle" label="周期" width="50"></el-table-column>
                        <el-table-column prop="cycleType" label="周期类型" width="80">
                            <template slot-scope="scope">
                                <div v-if="scope.row.cycleType == '0'">
                                    分
                                </div>
                                <div v-if="scope.row.cycleType == '1'">
                                    时
                                </div>
                                <div v-if="scope.row.cycleType == '2'">
                                    天
                                </div>
                                <div v-if="scope.row.cycleType == '3'">
                                    周
                                </div>
                                <div v-if="scope.row.cycleType == '4'">
                                    月
                                </div>
                                <div v-if="scope.row.cycleType == '5'">
                                    年
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startTime" label="任务开始时间">
                            <template slot-scope="scope">
                                <el-tag size="medium">{{scope.row.createTime.replace("T"," ")}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="missionTime" label="巡检时间">
                            <template slot-scope="scope">
                                <div v-if="scope.row.missionTime">
                                    <el-tag size="medium">{{scope.row.missionTime.replace("T"," ")}}</el-tag>
                                </div>
                                <div v-else>
                                    <el-tag size="medium">暂无数据</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="processflag" label="状态">
                            <template slot-scope="scope">
                                <div v-if="scope.row.processflag == '0'">
                                    <el-tag size="medium" type="warning">未巡检</el-tag>
                                </div>
                                <div v-if="scope.row.processflag == '2'">
                                    <el-tag size="medium" type="success">已巡检</el-tag>
                                </div>
                                <div v-if="scope.row.processflag == '3'">
                                    <el-tag size="medium" type="warning">超时未巡检</el-tag>
                                </div>
                                <div v-if="scope.row.processflag == '4'">
                                    <el-tag size="medium" type="success">超时已巡检</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <!--<el-table-column label="现场图片">-->
                        <!--<template slot-scope="scope">-->
                        <!--<template v-if="scope.row.img">-->

                        <!--<a :href="imageUrl+scope.row.img" class="swipebox" title="ESC键退出">-->
                        <!--<el-popover-->
                        <!--placement="right"-->
                        <!--width="300"-->
                        <!--trigger="hover"-->
                        <!--popper-class="popClass">-->
                        <!--<img :src="imageUrl+scope.row.img"-->
                        <!--style="max-width:600px;max-height: 380px "/>-->
                        <!--<img :src="imageUrl+scope.row.img" slot="reference"-->
                        <!--style="max-width:80px;max-height: 80px "/>-->
                        <!--</el-popover>-->
                        <!--</a>-->

                        <!--</template>-->
                        <!--<template v-if="scope.row.img1">-->
                        <!--<a :href="imageUrl+scope.row.img1" class="swipebox" title="ESC键退出">-->
                        <!--<el-popover-->
                        <!--placement="right"-->
                        <!--width="300"-->
                        <!--trigger="hover"-->
                        <!--popper-class="popClass">-->
                        <!--<img :src="imageUrl+scope.row.img1"-->
                        <!--style="max-width:600px;max-height: 380px "/>-->
                        <!--<img :src="imageUrl+scope.row.img1" slot="reference"-->
                        <!--style="max-width:80px;max-height: 80px "/>-->
                        <!--</el-popover>-->
                        <!--</a>-->
                        <!--</template>-->
                        <!--<template v-if="scope.row.img2">-->
                        <!--<a :href="imageUrl+scope.row.img2" class="swipebox" title="ESC键退出">-->
                        <!--<el-popover-->
                        <!--placement="right"-->
                        <!--width="300"-->
                        <!--trigger="hover"-->
                        <!--popper-class="popClass">-->
                        <!--<img :src="imageUrl+scope.row.img2"-->
                        <!--style="max-width:600px;max-height: 380px "/>-->
                        <!--<img :src="imageUrl+scope.row.img2" slot="reference"-->
                        <!--style="max-width:80px;max-height: 80px "/>-->
                        <!--</el-popover>-->
                        <!--</a>-->
                        <!--</template>-->
                        <!--<template v-if="scope.row.img3">-->
                        <!--<a :href="imageUrl+scope.row.img3" class="swipebox" title="ESC键退出">-->
                        <!--<el-popover-->
                        <!--placement="right"-->
                        <!--width="300"-->
                        <!--trigger="hover"-->
                        <!--popper-class="popClass">-->
                        <!--<img :src="imageUrl+scope.row.img3"-->
                        <!--style="max-width:600px;max-height: 380px "/>-->
                        <!--<img :src="imageUrl+scope.row.img3" slot="reference"-->
                        <!--style="max-width:80px;max-height: 80px "/>-->
                        <!--</el-popover>-->
                        <!--</a>-->
                        <!--</template>-->
                        <!--</template>-->
                        <!--</el-table-column>-->
                        <!--<el-table-column label="是否有隐患">-->
                        <!--<template slot-scope="scope">-->
                        <!--<div v-if="scope.row.alarmSituation==1">-->
                        <!--<el-tag size="medium" type="danger">存在隐患</el-tag>-->
                        <!--</div>-->
                        <!--<div v-if="scope.row.alarmSituation==0">-->
                        <!--<el-tag size="medium" type="success">无隐患</el-tag>-->
                        <!--</div>-->
                        <!--</template>-->
                        <!--</el-table-column>-->
                        <!--<el-table-column label="操作" width="300px" align="center">-->
                        <!--<template slot-scope="scope">-->
                        <!--<el-button @click="showDetail(scope.row.Id,scope.row.processflag)" round size="mini"-->
                        <!--icon="el-icon-share">详情-->
                        <!--</el-button>-->
                        <!--</template>-->
                        <!--</el-table-column>-->
                    </el-table>
                </template>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>

                <el-dialog title="处理明细" :visible.sync="detailFormVisible" :show-close="false">
                    <template v-if="DetailData">
                        <table border="1" cellpadding="10" cellspacing="0" style="width: 100%;margin-top: 20px"
                               v-for="item in DetailData">
                            <tr>
                                <td style="font-weight: bold">风险内容:</td>
                                <td>{{item.title}}</td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">风险类型:</td>
                                <td>{{item.damageType}}</td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold">潜在后果:</td>
                                <td>{{item.damage}}</td>
                            </tr>
                            <template v-if="item.processFlag !=null">
                                <tr>
                                    <td style="font-weight: bold">隐患内容:</td>
                                    <td>{{item.errorDesc}}</td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold">隐患等级:</td>
                                    <td>
                                        <!--<template v-if="item.errorGrade==1">-->
                                        <!--I-->
                                        <!--</template>-->
                                        <!--<template v-if="item.errorGrade==2">-->
                                        <!--II-->
                                        <!--</template>-->
                                        <!--<template v-if="item.errorGrade==3">-->
                                        <!--III-->
                                        <!--</template>-->
                                        <!--<template v-if="item.errorGrade==4">-->
                                        <!--IV-->
                                        <!--</template>-->

                                        <div v-if="item.errorGrade==1" style="text-align: center;">
                                            <img src="../../../imgs/onelevel.png">
                                            <div align="center">极其危险</div>
                                        </div>
                                        <div v-if="item.errorGrade==2" style="text-align: center;">
                                            <img src="../../../imgs/twolevel.png">
                                            <div align="center">高度危险</div>
                                        </div>
                                        <div v-if="item.errorGrade==3" style="text-align: center;">
                                            <img src="../../../imgs/threelevel.png">
                                            <div align="center">显著危险</div>
                                        </div>
                                        <div v-if="item.errorGrade==4" style="text-align: center;">
                                            <img src="../../../imgs/fourlevel.png">
                                            <div align="center">稍有危险</div>
                                        </div>

                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-weight: bold">责任人:</td>
                                    <td>{{item.userName}}</td>
                                </tr>
                            </template>
                            <template v-if="item.processFlag==null">
                                <tr>
                                    <td style="font-weight: bold">隐患详情:</td>
                                    <td>无隐患</td>
                                </tr>
                            </template>
                        </table>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancelDetail">确定</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
        <el-row>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    $(function ($) {
        $(".swipebox").swipebox();
    })
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            date: '',
            formLabelWidth: '120px',
            currentPage: 1,
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            tableData: [],
            projectNo: '',
            userName: '',
            patrolName: '',
            processflag: '0',
            pointType: '',
            editMod: false,
            DetailData: [],
            detailFormVisible: false,
            pointData: [{Name: '所有', Id: -1}, {Name: '风险', Id: 0}, {Name: '设备', Id: 1}],
            flagData: [{Name: '所有', Id: -1}, {Name: '未巡检', Id: 0}, {Name: '已巡检', Id: 2}, {Name: '超时未巡检', Id: 3}]
        },
        created: function () {
            this.date = TimeUtil.convertToString(new Date()).substr(0, 7);
            this.loadData();
        },
        methods: {
            cancelDetail() {
                this.detailFormVisible = false;
                this.DetailData = {};
            },
            showDetail(id, processflag) {
                if (processflag == 2) {
                    this.detailFormVisible = true;
                    HttpUtil.get('Executedetail/getdetail', {Id: id}).success((res) => {
                        vuePage.DetailData = res.data.executeDetails;
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '未有详情！'
                    });
                }
            },
            editClick(row) {
                this.param = row;
                this.dialogFormVisible = true;
                this.editMod = true;
            },
            loadData: function () {
                let dArr = this.date.split('-');
                var param = {};
                if (this.userName)
                    param.userName = this.userName;
                if (this.patrolName)
                    param.patrolName = this.patrolName;
                // if (this.processflag != -1)
                param.processflag = '0';
                if (this.pointType != -1)
                    param.pointType = this.pointType;
                param.year = dArr[0];
                param.month = dArr[1];
                // if (SiteConfig.account.projectNo)
                //     param.projectNo = SiteConfig.account.projectNo;
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('Patrolexcute/getRiskStatus2', param).success((res) => {
                    // vuePage.tableData = res.data;

                    this.tableData = [];
                    let obj = res.data;
                    for (var i = 0; i < obj.length; i++) {
                        var name = "";
                        for (var j = 0; j < obj[i].group.length; j++) {
                            name += obj[i].group[j].userName;
                            if (j < obj[i].group.length - 1)
                                name += ",";
                        }
                        var p = obj[i].task;
                        p.name = name;
                        this.tableData.push(p);
                    }
                    vuePage.totalCount = res.total;
                });
            },
            exportData() {
                let dArr = this.date.split('-');
                var param = {};
                param.projectNo = SiteConfig.account.projectNo;
                param.processflag = 0;
                param.year = dArr[0];
                param.month = dArr[1];
                HttpUtil.get('Patrolexcute/ExportRiskCheck', param).success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            search: function () {
                this.pageno = 1;
                this.loadData();

            },
            onCheckbox: function (row) {
            },
        },

        mounted: function () {
            this.imageUrl = SiteConfig.webApiset;
        }
    });
</script>
</body>
</html>
